<!DOCTYPE html>
<html lang="zh">
 <head> 
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no,viewport-fit=cover" />
  <meta name="author" content="@0047ol" /> 
  <meta name="copyright" content="©0047ol" /> 
  <title>QQ Widget</title> 
  <link type="image/png" rel="shortcut icon" href="https://qun.qq.com/favicon.ico" /> 
  <link rel="stylesheet" href="https://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css" />
  <link rel="stylesheet" href="/assets/css/qq_widget.css" />
  </head>
 <body ontouchstart> 
  <div style="padding: 10px;">
    <button class="ui-btn-lg" qui-toast="{'SUCCESS','test',1500}">Toast</button>
	<button class="ui-btn-lg" id="showToast" style="margin: 10px 0 10px;">Toast2</button>
	<button class="ui-btn-lg" id="showLoadingTip" style="margin: 10px 0 10px;">LoadingTip</button>
    <button class="ui-btn-lg" id="showDialog" style="margin: 10px 0 10px;">Dialog</button>
    <button class="ui-btn-lg" id="showActionSheet" style="margin: 10px 0 10px;">SheetMenu</button>
    <button class="ui-btn-lg" id="showPromptDialog" style="margin: 10px 0 10px;">PromptDialog</button>
	<button class="ui-btn-lg" id="showBottomAction" style="margin: 10px 0 10px;">BottomAction</button>
	<button class="ui-btn-lg" id="showChooseDialog" style="margin: 10px 0 10px;">ChooseDialog</button>
	<button class="ui-btn-lg" id="showTipsPage">TipsPage</button>
  </div>
  
    <div id="BottomActionDialog" class="qui-bottom-action">
	  <div class="qui-bottom-action-mask"></div>
	  <div class="qui-bottom-action-content">
	    <div class="qui-bottom-action-header">
		  <div class="qui-bottom-action-header-btn-cancel">关闭</div>
	      <div class="qui-bottom-action-header-bar">
			<div class="qui-bottom-action-header-bar-cont"></div>
	      </div>
		  <div class="qui-bottom-action-header-btn-confirm">完成</div>
	    </div>
	    <div class="qui-bottom-action-panel">
	      <div class="ui-form-item"><label class="ui-checkbox"><input type="checkbox"></label><p>这是一个测试</p></div>
	      <div class="ui-form-item"><label class="ui-checkbox"><input type="checkbox"></label><p>这是一个测试</p></div>
	      <div class="ui-form-item"><label class="ui-checkbox"><input type="checkbox"></label><p>这是一个测试</p></div>
		  <div class="ui-form-item"><label class="ui-checkbox"><input type="checkbox"></label><p>这是一个测试</p></div>
		  <div class="ui-form-item"><label class="ui-checkbox"><input type="checkbox"></label><p>这是一个测试</p></div>
		  <div class="ui-form-item"><label class="ui-checkbox"><input type="checkbox"></label><p>这是一个测试</p></div>
		  <div class="ui-form-item"><label class="ui-checkbox"><input type="checkbox"></label><p>这是一个测试</p></div>
		  <div class="ui-form-item"><label class="ui-checkbox"><input type="checkbox"></label><p>这是一个测试</p></div>
		  <div class="ui-form-item"><label class="ui-checkbox"><input type="checkbox"></label><p>这是一个测试</p></div>
		  <div class="ui-form-item"><label class="ui-checkbox"><input type="checkbox"></label><p>这是一个测试</p></div>
		  <div class="ui-form-item"><label class="ui-checkbox"><input type="checkbox"></label><p>这是一个测试</p></div>
		  <div class="ui-form-item"><label class="ui-checkbox"><input type="checkbox"></label><p>这是一个测试</p></div>
		  <div class="ui-form-item"><label class="ui-checkbox"><input type="checkbox"></label><p>这是一个测试</p></div>
		  <div class="ui-form-item"><label class="ui-checkbox"><input type="checkbox"></label><p>这是一个测试</p></div>
		  <div class="ui-form-item"><label class="ui-checkbox"><input type="checkbox"></label><p>这是一个测试</p></div>
	    </div>
	  </div>
   </div>
  
 <script type="text/javascript" src="/assets/js/tool.js"></script>
 <script type="text/javascript" src="/assets/js/qq_widget.js"></script>
 <script type="text/javascript">
document.querySelector('#showToast').addEventListener('click',function() {
	let mToast = new QToast();
	mToast.setMessage('这是一个弹窗提示');
	//mToast.setType(mToast.TOAST_TYPE_SUCCESS);
	mToast.setTime(1500);
	mToast.show();
});

document.querySelector('#showLoadingTip').addEventListener('click',function() {
	let mLoadingTip = new QLoadingTip();
	mLoadingTip.setMessage('这是加载提示...');
	//mLoadingTip.setType(mLoadingTip.LOADING_TYPE_TOP);
	mLoadingTip.setTime(2000);
	//mBottomActionDialog.setCancelable(true);
	mLoadingTip.show();
});

document.querySelector('#showDialog').addEventListener('click',function() {
	let mDialog = new QDialog();
	mDialog.setTitle('这是标题');
	mDialog.setMessage('这是一个对话框');
	mDialog.setPositiveButton('取消',mDialog.BUTTON_TEXT_COLOR_NORMAL,function(text){
		new QToast().setMessage(text).show();
		mDialog.close();
	});
	mDialog.setNegativeButton('确定',mDialog.BUTTON_TEXT_COLOR_DANGER,function(text){
		new QToast().setMessage(text).show();
		mDialog.close();
	});
	mDialog.show();
});

document.querySelector('#showActionSheet').addEventListener('click',function() {
	let mBottomSheetMenu = new QBottomSheetMenu();
	mBottomSheetMenu.setTitle('这是标题');
	mBottomSheetMenu.setMenuItem('选项一',mBottomSheetMenu.ITEM_TEXT_COLOR_NORMAL,function(text) {
		new QToast().setMessage(text).show();
	});
	mBottomSheetMenu.setMenuItem('选项二',mBottomSheetMenu.ITEM_TEXT_COLOR_PRIMARY,function(text) {
		new QToast().setMessage(text).show();
	});
	mBottomSheetMenu.setMenuItem('选项三',mBottomSheetMenu.ITEM_TEXT_COLOR_DANGER,function(text) {
		new QToast().setMessage(text).show();
	});
	mBottomSheetMenu.show();
});

document.querySelector('#showPromptDialog').addEventListener('click',function() {
	let mBottomPromptDialog = new QBottomPromptDialog();
	mBottomPromptDialog.setTitle('这是标题');
	mBottomPromptDialog.setInputHint('提示文字');
	mBottomPromptDialog.setInputValue('');
	mBottomPromptDialog.setInputMaxLength(50);
	mBottomPromptDialog.setInputSingleLine(false);
	mBottomPromptDialog.onInput = function(value) {
		new QToast().setMessage('value:' + value).show();
	};
	mBottomPromptDialog.setCheckBoxTips('这里可以说明用途');
	mBottomPromptDialog.setChecked(false);
	mBottomPromptDialog.onChange = function(checked) {
		new QToast().setMessage('checked:' + checked).show();
	};
	mBottomPromptDialog.setRequired(0);
	mBottomPromptDialog.onButtonClick = function(value, checked) {
		new QToast().setMessage('value:' + value + ';checked:' + checked).show();
		mBottomPromptDialog.close();
	};
	mBottomPromptDialog.show();
});

document.querySelector('#showChooseDialog').addEventListener('click',function() {
	let mBottomChooseDialog = new QBottomChooseDialog();
	mBottomChooseDialog.setChooseType(0);
	mBottomChooseDialog.setMenuItem('','选项一','123');
	mBottomChooseDialog.setMenuItem('','选项二','456');
	mBottomChooseDialog.setMenuItem('https://q1.qlogo.cn/headimg_dl?dst_uin=&spec=100','选项三','135');
	mBottomChooseDialog.setMenuItem('https://q1.qlogo.cn/headimg_dl?dst_uin=&spec=100','选项四','246');
	mBottomChooseDialog.setMenuItem('https://q1.qlogo.cn/headimg_dl?dst_uin=&spec=100','选项五','789');
	mBottomChooseDialog.setConfirmButton('完成',function(data) {
		new QToast().setMessage('button').show();
		console.log(data);
		mBottomChooseDialog.close();
	});
	mBottomChooseDialog.setCanceledonScrollOutside(true);
	mBottomChooseDialog.show();
});

document.querySelector('#showBottomAction').addEventListener('click',function() {
	var mBottomActionDialog1 = new QBottomActionDialog('#BottomActionDialog');
	mBottomActionDialog1.setConfirmButtonOnClick(function() {
		new QToast().setMessage('button').show();
		mBottomActionDialog1.close();
	});
	mBottomActionDialog1.setCancelButtonOnClick(function() {
		new QToast().setMessage('button').show();
		mBottomActionDialog1.close();
	});
	mBottomActionDialog1.setCanceledonScrollOutside(true);
	mBottomActionDialog1.show();
});

document.querySelector('#showTipsPage').addEventListener('click',function() {
	let mTipsPage = new QTipsPage();
	//mTipsPage.setType(mTipsPage.PAGE_TYPE_SUCCESS);
	mTipsPage.setTitle('这里是标题');
	mTipsPage.setMessage('这里是内容这里是内容这里是内容');
	mTipsPage.setConfirmButton('确认',function(button) {
		new QToast().setMessage('button').show();
		mTipsPage.close();
	});
	mTipsPage.setCancelButton('取消',function(button) {
		new QToast().setMessage('button').show();
		mTipsPage.close();
	});
	mTipsPage.show();
});
</script>
 </body>
</html>